<template>
  <div class="home">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header>
        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
          <div class="logo">
            <i class="el-icon-reading"></i>
            校园二手书交易平台
          </div>
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/market">书籍市场</el-menu-item>
          <el-menu-item index="/my-posts">我的发布</el-menu-item>
          <el-menu-item index="/messages">消息中心</el-menu-item>
          <div class="user-info">
            <el-button type="text" style="color: #fff" @click="goToLogin">退出</el-button>
            <!-- <el-button type="text" style="color: #fff" @click="goToRegister">注册</el-button> -->
          </div>
        </el-menu>
      </el-header>

      <el-main v-loading="pageLoading" element-loading-text="加载中...">
        <!-- 轮播图部分 -->
        <div class="carousel-section" v-loading="carouselLoading">
          <el-carousel height="400px" :interval="4000" arrow="always" type="card">
            <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
              <div class="carousel-content">
                <img 
                  :src="item.linkUrl" 
                  :alt="item.title" 
                  class="carousel-image"
                  @click="handleCarouselClick(item)"
                >
                <div class="carousel-title" v-if="item.title">{{ item.title }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 快速功能区 -->
        <el-row :gutter="30" class="feature-section">
          <el-col :span="8">
            <div @click="goToMarket" class="feature-wrapper">
              <el-card shadow="hover" class="feature-card">
                <i class="el-icon-shopping-cart-2"></i>
                <h3>我要买书</h3>
                <p>浏览海量二手教材</p>
                <div class="feature-card-overlay">
                  <span>立即浏览</span>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="8">
            <div @click="goToSell" class="feature-wrapper">
              <el-card shadow="hover" class="feature-card">
                <i class="el-icon-sell"></i>
                <h3>我要卖书</h3>
                <p>发布闲置图书</p>
                <div class="feature-card-overlay">
                  <span>开始发布</span>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="8">
            <div @click="goToProfile" class="feature-wrapper">
              <el-card shadow="hover" class="feature-card">
                <i class="el-icon-user"></i>
                <h3>个人中心</h3>
                <p>管理我的账户信息</p>
                <div class="feature-card-overlay">
                  <span>进入中心</span>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>

        <!-- 热门书籍推荐 -->
        <div class="hot-books" v-loading="booksLoading">
          <div class="section-header">
            <h2 class="section-title">热门推荐</h2>
            <el-button type="text" @click="goToMarket">查看更多 ></el-button>
          </div>
          <el-row :gutter="20">
            <el-col :span="4" v-for="book in hotBooks" :key="book.id">
              <el-card :body-style="{ padding: '0px' }" shadow="hover" class="book-card">
                <div class="image-container">
                  <img :src="book.imageUrl" class="book-image">
                  <div class="book-overlay">
                    <el-button type="primary" size="small" @click="viewBookDetail(book.id)">查看详情</el-button>
                  </div>
                </div>
                <div class="book-info">
                  <h4 class="book-title">{{ book.title }}</h4>
                  <p class="price">¥{{ book.price }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>

      <!-- 页脚 -->
      <el-footer>
        <div class="footer-content">
          <p>© 2025 校园二手书交易平台 版权所有</p>
          <p>让闲置书籍流动起来，让知识传递更有价值</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import request from '@/utils/request'  // 导入request实例

export default {
  name: 'HomePage',
  data() {
    return {
      pageLoading: false,// true: 页面加载中, false: 页面加载完成
      carouselLoading: false,// true: 轮播图数据加载中, false: 轮播图数据加载完成
      booksLoading: false,// true: 热门书籍数据加载中, false: 热门书籍数据加载完成
      carouselImages: [], // 轮播图数据
      hotBooks: []       // 热门书籍数据
    }
  },
  watch: {
    $route: {
      handler(to) {
        if(to.path === '/home') {
          this.fetchCarouselData()
          this.getHotBooks()
        }
      }
    }
  },
  methods: {
    // 获取轮播图数据
    fetchCarouselData() {
    this.carouselLoading = true
    request.get("/api/home/carousel/list")
      .then((res) => {
        if(res.data.code === 1) {
          //赋值轮播图数据
          this.carouselImages = res.data.data
          //加载完成
          this.carouselLoading = false
        } else {
          this.$message.error(res.data.msg || '获取轮播图数据失败')
        }
      })
      
     
    },
    // 获取热门图书
    getHotBooks() {
      //显示加载中
      this.booksLoading = true
      request.get("/api/home/books/hot").then((res)=>{
        if(res.data.code === 1){
          this.hotBooks = res.data.data
          //加载完成
          this.booksLoading = false
        }else{
          this.$message({
            type: 'error',
            message: res.data.msg || '获取轮播图数据失败'
          })
        }
      })
    },
    
    fetchHotBooks() {
      this.booksLoading = true
    },
    // 其他路由跳转方法保持不变
    goToLogin() {
      this.$router.push('/login')
    },
    goToRegister() {
      this.$router.push('/register')
    },
    goToMarket() {
      this.$router.push('/market')
    },
    goToSell() {
      this.$router.push('/my-posts')
    },
    goToProfile() {
      this.$router.push('/profile')
    },
    viewBookDetail(bookId) {
      this.$router.push(`/book/${bookId}`)
    }
  },
  // 页面创建时自动发送请求
  created() {
    this.fetchCarouselData(),
    this.getHotBooks()
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.el-header {
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.logo {
  float: left;
  line-height: 60px;
  margin: 0 20px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.logo i {
  margin-right: 10px;
  font-size: 24px;
}

.user-info {
  float: right;
  line-height: 60px;
  margin-right: 20px;
}

/* 轮播图样式 */
.carousel-section {
  margin: 20px 0;
}

.carousel-content {
  position: relative;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.carousel-image:hover {
  transform: scale(1.05);
}

.carousel-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 18px;
}

/* 功能区样式 */
.feature-section {
  margin: 40px 0;
  padding: 0 20px;
}

.feature-card {
  text-align: center;
  padding: 40px 30px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card i {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 20px;
}

.feature-card h3 {
  margin: 15px 0;
  color: #303133;
}

.feature-card p {
  color: #909399;
}

.feature-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(64, 158, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.feature-card-overlay span {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.feature-card:hover .feature-card-overlay {
  opacity: 1;
}

/* 热门推荐区样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

.section-title {
  font-size: 24px;
  color: #303133;
  margin: 0;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.book-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  border-radius: 8px;
  overflow: hidden;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.image-container {
  height: 350px;
  overflow: hidden;
  position: relative;
}

.book-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.book-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-container:hover .book-overlay {
  opacity: 1;
}

.image-container:hover .book-image {
  transform: scale(1.1);
}

.book-info {
  padding: 14px;
}

.book-title {
  margin: 0;
  font-size: 14px;
  color: #303133;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

/* 页脚样式 */
.el-footer {
  text-align: center;
  color: #fff;
  padding: 30px 0;
  background-color: #545c64;
}

.footer-content p {
  margin: 5px 0;
}

.footer-content p:first-child {
  font-size: 16px;
}

.footer-content p:last-child {
  font-size: 14px;
  opacity: 0.8;
}
</style>